<template>
  <view class="classified">
	    <!-- 搜索 -->
    <swiper-search width="600rpx"/>
    <!-- 分类标签 -->
    <v-tabs
      lineHeight="6rpx"
      :lineScale="0.2"
      paddingItem="0 22rpx"
      :bold="true"
      v-model="activeTab"
      field="name"
      :tabs="tabList"
      @change="changeTab"
    ></v-tabs>
    <view style="height: 10rpx; background: #f7f8fb"></view>
    <!-- 分类二级标签 -->
    <v-tabs-column
      :tabs="leftList"
      position="left"
      v-model="current"
      field="name"
      @change="onChange"
    >
      <!-- 分类三级商品 -->
      <scroll-view
        class="list"
        scroll-y
        style="height: 85vh"
        @scrolltolower="onScrolltolower"
        :scroll-top="tabTop"
      >
        <view
          v-for="(item, index) in rightList"
          :key="index"
          class="list_item"
          @click="$onTo(`/pages/product/product?productId=${item.itemId}`)"
        >
          <view class="item-left">
            <image :src="item.image" mode="scaleToFill" class="img"></image>
            <text class="title-top">{{
              getOldNewText(item.oldNewDegree)
            }}</text>
          </view>
          <view class="item-right">
            <view class="item-right-title">{{ item.name }}</view>
            <view class="item-right-tabs" v-if="item.labels.length">
              <text
                v-for="(itemChild, indexChild) in item.labels"
                :key="indexChild"
                class="tag-item"
              >
                {{ itemChild }}
              </text>
            </view>
            <view class="item-right-tabs" v-else>
              <text class="tag-item">信用免押</text>
              <text class="tag-item">正品保障</text>
            </view>
            <view class="price-area plr20">
              <view class="left">
                <text class="m">¥</text>
                <text class="l">
                  {{ getPartMoney(item.price && item.price.toString(), true) }}
                </text>
                <text class="d">.</text>
                <text class="r">
                  {{ getPartMoney(item.price && item.price.toString(), false) }}
                </text>
                <text class="r">/天</text>
              </view>
            </view>
          </view>
        </view>
        <view class="placeholder" v-if="rightList.length === 0">
      <image
        src="../../static/product/xjsp.png"
        mode="scaleToFill"
        class="img"
      ></image>
      <view class="title"> 暂无商品 </view>
      <view class="fu"> 去其他类目看看吧 </view>
    </view>
      </scroll-view>
    </v-tabs-column>
  </view>
</template>

<script>
import vTabsColumn from "../../components/v-tabs-column/v-tabs-column.vue"
import vTabs from "@/components/v-tabs/v-tabs.vue"
import swiperSearch from "@/components/swiper-search/swiper-search.vue"
import classIfiedService from "./services"
import { OLD_NEW_MAP, EMPTY_PLACEHOLDER } from "../../utils/constant.js"
export default {
  data() {
    return {
      current: 0, //分类二级标签当前下标
      leftList: [], //分类二级标签列表
      rightList: [], //分类三级商品列表
      activeTab: 0, //分类当前下标
      tabList: [], //分类列表
      pageNum: 0, //商品页数
      pageSize: 10, //每一页条数
      total: 0, //总条数
      categoryId: null, //分类二级标签id
      tabTop: 0, //分类三级商品距离顶部有多少距离
    }
  },
  components: {
    vTabsColumn,
    vTabs,
    swiperSearch
  },
  onLoad() {
    this.onList(0)
  },

  methods: {
    /**
     * 请求页面数据
     * 	@param {*} parentId : 如果parentId表示是第一次进入分类页
     */
    onList(parentId) {
      classIfiedService.listLite({ parentId }).then((res) => {
        if (parentId === 0) {
          //获取二级分类
          this.onList(res.data[0].id)
          //获取分类标签列表
          this.tabList = res.data
        } else {
          //获取二级分类列表
          this.leftList = res.data
          //获取二级分类列表第一位id
          this.categoryId = res.data[0].id
          this.onChange(0)
        }
      })
    },

    onScrolltolower() {
      this.onLiteProduct()
    },
    //切换分类标签下标
    changeTab(index) {
      //保存当前下标
      this.activeTab = index
      //重置二级分类标签下标
      this.current = 0

      this.onList(this.tabList[index].id)
    },
    /**
     * 获取金额的小数点前、后的数据
     * @param {Boolean} isFront : 是否是前半部分
     */
    getPartMoney(prices, isFront) {
      const price = prices || ""
      if (!price) return EMPTY_PLACEHOLDER
      const list = price.split(".")
      const result = isFront ? list[0] : list[1]
      return result || 0
    },
    /**
     * 获取新旧程序的标识
     */
    getOldNewText(oldNewDegree) {
      const level = oldNewDegree // 新旧程度标识
      return OLD_NEW_MAP[level] || EMPTY_PLACEHOLDER
    },
    /**
		获取当前标签的商品
		@param {*} type : 判断是否是切换tab
		 */
    onLiteProduct(type) {
      //判断是否需要请求商品
      if (this.pageNum * this.pageSize - this.total >= 10) {
        if (this.total !== 0) {
          uni.showToast({
            title: "没有更多啦～",
          })
        }
        return
      }
      //翻页功能每次下拉需要页数加一
      this.pageNum = this.pageNum + 1
      classIfiedService
        .listLiteCategoryProduct({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          categoryId: this.categoryId,
        })
        .then((res) => {
          if (type === "Tab") {
            //如果是tab切换让rightList重置
            this.rightList = res.data.records
          } else {
            //如果不是让rightList合并
            this.rightList = this.rightList.concat(res.data.records || [])
          }
          this.total = res.data.total
        })
    },
    /**
     * 获取金额的小数点前、后的数据
     * @param {*}  index: 二级分类下标
     */
    onChange(index) {
      let { current, leftList, pageSize } = this
      let categoryId = leftList[index].id
      this.categoryId = categoryId
      this.current = index
      this.pageNum = 0
      //切换二级分类让商品回到顶部
      if (this.tabTop === 0) {
        this.tabTop = 1
      } else {
        this.tabTop = 0
      }
      this.onLiteProduct("Tab")
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
.classified {
  
  .list {
    .list_item {
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      margin-left: 42rpx;
      .item-left {
        width: 164rpx;
        height: 164rpx;
        position: relative;
        margin-right: 22rpx;
        flex-shrink: 0;
        .img {
          width: 100%;
          height: 100%;
		      border-radius: 20rpx;
        }
        .title-top {
          width: 56rpx;
          height: 29rpx;
          @include global-background-color();
          border-radius: 20rpx 0rpx 20rpx 0rpx;
          text-align: center;
          position: absolute;
          z-index: 2;
          left: 0;
          font-size: 20rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 29rpx;
        }
      }
      .item-right {
        .item-right-title {
          height: 40rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 40rpx;
          overflow: hidden;
          width: 100%;
        }

        .item-right-tabs {
          margin-top: 10rpx;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .tag-item {
            height: 30rpx;
            max-width: 13em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
            line-height: 30rpx;
            border-radius: 5rpx;
            border: 1rpx solid #e52021;
            font-size: 22rpx;
            font-family: PingFangSC-Light, PingFang SC;
            font-weight: 300;
            color: #e52021;
            padding: 0 4rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
          }
        }
        .price-area {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-top: 30rpx;
          .left {
            color: #e52021;
            .m {
              font-size: 20rpx;
              margin-right: 6rpx;
            }
            .l {
              font-size: 38rpx;
              font-weight: 500;
            }
            .d {
              font-size: 36rpx;
            }
            .r {
              font-size: 20rpx;
              font-weight: 500;
            }
          }
          .right {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }
  .placeholder {
    text-align: center;
    padding-top: 300rpx;
    .img {
      width: 230rpx;
      height: 253rpx;
    }
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      margin-top: 46rpx;
    }
    .fu {
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      margin-top: 10rpx;
    }
  }
}
</style>
